<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<style>
    .body_bg{
        background-image: url("./images/bg-2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment:fixed;
    }
    .logo-title{
        font-size:26px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(0,71,157,1);
    }
    .logo{
        width: 54px;
        height: 58px;
    }

    .footer{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(255,255,255,1);
        line-height:22px;
    }
    .register{
        width:72.6%;
        height:auto;
        background:rgba(241,249,254,1);
        box-shadow:0px 16px 60px 0px rgba(0, 0, 0, 0.5);
        border-radius:16px;
    }
    .register-title{
        font-size:34px;
        font-family:SourceHanSansCN;
        font-weight:bold;
        color:rgba(67,156,255,1);
        line-height:48px;
    }
    input{
        background:none;
        outline:none;
        border:none;
        size: 24px;
        height: 80px;
    }
    .box{
        width: 423px;
        border-bottom: 1px solid rgba(224,224,224,1);
        height: 40px;
    }
    .login-btn{
        width:87.96%;
        height:12.53%;
        background:rgba(67,156,255,1);
        border-radius:6px;
        color: #ffffff;
        font-size: 30px;
        line-height: 70px;
    }
    .forgotpassword{
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:89px;
        opacity:0.6;
    }
    .registerImg{
        width: 662px;
        height: 460px
    }
    @media screen and (min-width: 1366px) and (max-width: 1600px) {
      .registerImg{
          width: 500px;
          height: 360px;
      }
        .register-title {
            font-size: 20px;
            font-family: SourceHanSansCN;
            font-weight: bold;
            color: rgba(67,156,255,1);
            line-height: 48px;
            margin-top: 20px;
        }
        .box {
            width: 373px;
            border-bottom: 1px solid rgba(224,224,224,1);
            height: 40px;
            margin: 10px;
        }
        .login-btn {
            width: 87.96%;
            height: 50px;
            background: rgba(67,156,255,1);
            border-radius: 6px;
            color: #ffffff;
            font-size: 20px;
            line-height: 50px;
        }
    }
    /*565 630*/
</style>
<body class="body_bg">
<header>
    <div class="logo-title row justify-center mb-2" style="margin-top: 4%">
        <img src="./images/logo.png" alt="" class="logo mb-1 mr-1">
        <span>山东速保智能科技有限公司</span>
    </div>
</header>
<section>
    <div class="row justify-center">
        <div class="register">
            <div class="row justify-center">
                <div style="width: 50%;margin: 100px 0">
                    <img src="./images/tu9.png" alt="" class="registerImg">
                </div>
                <div style="width: 50%" class="column align-center">
                    <div class="register-title text-center mt-5 mb-3">
                        <span>用户注册</span>
                    </div>
                    <div class="row justify-center align-center ma-2 box">
                        <div style="width: 81px" class="text-center">
                            <img src="./images/zhanghao.png" alt="" class="user">
                        </div>
                        <div style="width: 100%">
                            <input type="text" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="row justify-center align-center ma-2 box">
                        <div style="width: 81px" class="text-center">
                            <img src="./images/shouji.png" alt="" class="user">
                        </div>
                        <div style="width: 100%">
                            <input type="text" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="row justify-center align-center ma-2 box">
                        <div style="width: 81px" class="text-center">
                            <img src="./images/mima.png" alt="" class="user">
                        </div>
                        <div style="width: 100%">
                            <input type="text" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="row justify-center align-center ma-2 box">
                        <div style="width: 81px" class="text-center">
                            <img src="./images/mima.png" alt="" class="user">
                        </div>
                        <div style="width: 100%">
                            <input type="text" placeholder="确认密码">
                        </div>
                    </div>
                    <div class="row justify-center align-center ma-2 box">
                        <div style="width: 81px" class="text-center">
                            <img src="./images/yanzhengma.png" alt="" class="user">
                        </div>
                        <div style="width: 100%">
                            <input type="text" placeholder="输入手机验证码">
                        </div>
                    </div>
                    <div class="login-btn text-center mt-2">
                        注册
                    </div>
                    <div class="forgotpassword text-center">
                        已有账号，<span style="color: #00479D">立即登录</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="mt-5">
        <div class="footer text-center">
            ©2012-2020    江西省小查信息科技有限公司 版权所有   Copyright© All Right Reserved.<br>
            江西省通信管理局备案号：赣ICP备19002888号
        </div>
    </div>
</footer>
</body>
</html>
